<div class="row content-block">
    <div class="col-sm-12">
        <h2>Table Small</h2>

        <div class="table-cell">
            <table class="table-maverix table-maverix-small">
                <tr>
                    <td class="td-icon"><span class="entypo-users"></span></td>
                    <td>Everyone</td>
                    <td class="text-right">
                        <select class="on-white-select">
                            <option selected>No Access</option>
                            <option>Read</option>
                            <option>Read & Write</option>
                        </select>
                        <span class="entypo-arrow-combo"></span>
                    </td>
                </tr>
                <tr class="selected">
                    <td class="td-icon"><span class="entypo-user"></span></td>
                    <td>Admin</td>
                    <td class="text-right">
                        <select class="on-white-select">
                            <option>No Access</option>
                            <option>Read</option>
                            <option selected>Read & Write</option>
                        </select>
                        <span class="entypo-arrow-combo"></span>
                    </td>

                </tr>
                <tr>
                    <td class="td-icon"><span class="entypo-network"></span></td>
                    <td>Staff</td>
                    <td class="text-right">
                        <select>
                            <option>No Access</option>
                            <option selected>Standard Select for non Webkit Browser</option>
                            <option>Read & Write</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <h2>Table Large</h2>

        <div class="table-cell" style="height: 300px">
            <table class="table table-maverix table-maverix-large">
                <tr>
                    <td class="td-icon"><span class="entypo-attention"></span></td>
                    <td><p class="info-main">Server did not react.</p>

                        <p class="info-sub">15.04.14 23:14</p></td>
                </tr>
                <tr class="selected">
                    <td class="td-icon"><span class="entypo-attention"></span></td>
                    <td><p class="info-main">Server did not react.</p>

                        <p class="info-sub">15.04.14 23:14</p></td>
                </tr>
                <tr>
                    <td class="td-icon"><span class="entypo-attention"></span></td>
                    <td><p class="info-main">Server did not react.</p>

                        <p class="info-sub">15.04.14 23:14</p></td>
                </tr>
                <tr>
                    <td class="td-icon"><span class="entypo-attention"></span></td>
                    <td><p class="info-main">Server did not react.</p>

                        <p class="info-sub">15.04.14 23:14</p></td>
                </tr>
                <tr>
                    <td>
                        <div class="placeholder"></div>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <div class="placeholder"></div>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <div class="placeholder"></div>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <div class="placeholder"></div>
                    </td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>

</div>

<div class="row content-block">
    <div class="col-sm-2">

        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="">
                <span class="entypo-cog"></span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li class="disabled"><a href="">Show Warning Details</a></li>
                <li><a href="">Clear Warnings</a></li>
            </ul>
        </div>

    </div>
    <div class="col-sm-10 text-right"><span class="search-input"><span class="entypo-search"></span><input type="text" class="mvx-search"
                                                                                                           placeholder="Filter Warnings"/></span>
        <a class="btn btn-help" href="" style="margin-left: 10px"><span class="entypo-help"></span></a>
    </div>

</div>

<div class="row content-block">
    <div class="col-sm-12">
        <hr/>
        <h2>Content Block Table</h2>

        <table class="table-content-block">
            <tr>
                <td class="td-label">Hostname:</td>
                <td><span class="on-badge"></span></td>
                <td>maverix.local<br>
                    <span class="nfo">
                        Here you'll find Access Information to this Server over the Internet.
                    </span>
                </td>
                <td class="td-actions">
                    <button>Edit ...</button>
                </td>
            </tr>

            <tr>
                <td class="td-label">Computername:</td>
                <td><span class="on-badge"></span></td>
                <td>maverix<br>
                    <span class="nfo">
                        Your Server is reachable under this address in the local network. <a href=""><span
                            class="entypo-right maverix-circle"></span></a>
                    </span>
                </td>
                <td class="td-actions">
                    <button>Edit ...</button>
                </td>
            </tr>

        </table>
        <hr/>
    </div>
</div>